<template>
  <el-header
    :class="isCollapse ? 'el-header-no' : 'el-header'"
    style="height: 50px"
  >
    <!-- <el-button
      type="primary"
      @click="toggleCollapse"
      :isCollapse="!isCollapse"
      style="
        background-color: #fff;
        border: 0;
        font-size: 19px;
        float: left;
        margin-left: -20px;
      "
    >
      <i
        :class="{
          'el-icon-s-fold': !isCollapse,
          'el-icon-s-unfold': isCollapse
        }"
        style="margin-top: 3px; color: #6f7374"
      ></i>
    </el-button> -->

    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" style="color: #6f7374; margin-right: 10px">
        <el-avatar class="el-jst-2">
          <img :src="userImg" />
        </el-avatar>
        <div class="el-jst-3">
          {{ userName }}<i
            class="el-icon-arrow-down el-icon--right"
            style="color: #6f7374"
          ></i>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item icon="el-icon-key" command="edit">
          修改密码</el-dropdown-item
        > -->
        <el-dropdown-item icon="el-icon-switch-button" command="quit">
          {{$t('login.loginOut')}}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

    <!-- <el-button
      type="primary"
      @click="screen"
      style="
        background-color: #fff;
        border: 0;
        float: right;
        margin-right: 5px;
        margin-top: 6px;
        font-size: 18px;
      "
    >
      <i class="el-icon-full-screen" style="color: #6f7374"></i
    ></el-button> -->
    <!-- <el-button
      style="
        background-color: #fff;
        border: 0;
        color: white;
        font-size: 18px;
        margin-left: -18px;
        float: left;
      "
    >
      <i
        class="el-icon-refresh-left"
        style="color: #6f7374; margin-top: 3px"
        @click="refresh"
      ></i>
    </el-button> -->

    <!-- <div class="btn-bell">
      <el-tooltip
        effect="dark"
        :content="message ? `有${message}条未读消息` : `消息中心`"
        placement="bottom"
      >
        <router-link to="">
          <i class="el-icon-message-solid"></i>
        </router-link>
      </el-tooltip>
      <span class="btn-bell-badge" v-if="message"></span>
    </div> -->

    <!-- <el-breadcrumb separator="/" class="el-jst-6">
      <el-breadcrumb-item :to="{ path: '/home' }">工作台</el-breadcrumb-item>
      <el-breadcrumb-item :to="current.path" v-if="current">{{
        current.label
      }}</el-breadcrumb-item>
    </el-breadcrumb> -->
  </el-header>
</template>

<script>

import { mapState } from "vuex";
import qs from "qs";

export default {
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    }),
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    }
  },
  data() {
    return {
      userImg: require("../assets/img/20220127001.jpg"),
      message: 2,
      userName: '',
    };
  },
  methods: {
    toggleCollapse() {
      this.$store.commit("collapseMenu");
    },
    handleCommand(command) {
      switch (command) {
        case "edit":
          console.log("修改密码");

          break;
        case "quit":
          localStorage.removeItem("satoken");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("selectedMenu");
          this.$router.push("/login");
          break;

        default:
          break;
      }
    },
    refresh() {
      location.reload();
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  },
  created() {
    var loginUser = qs.parse(localStorage.getItem("userInfo"));
    if (loginUser.avatar) {
      this.userImg = loginUser.avatar;
      this.userName = loginUser.userName;
    }
  }
};
</script>

<style>
@import "../assets/css/index.less";
</style>
